<template>
    <div class="container" v-loading.fullscreen.lock="loading" element-loading-text="加载中，请稍候...">
        应用管理
        <div class="stu-header">
            <el-form :inline="true" class="demo-form-inline" label-width="100px" label-position="left" >
                <el-form-item class="nine-form-title" label="跳转形式" prop="linkType">
                    <el-radio-group v-model="searchParam.linkType" @change="getDataList()">
                        <el-radio-button :label="null" name="linkType" class="study-item">全部</el-radio-button>
                        <el-radio-button :label="0" name="linkType" class="study-item">免密登入</el-radio-button>
                        <el-radio-button :label="1" name="linkType" class="study-item">非免密</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label-position="right" class="nine-form-title " label="操作类型" prop="linkType">
                    <el-button type="primary" @click="addApply">新增应用</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="dataLists" highlight-current-row class="none-border" ref="multipleTable" >
            <el-table-column label="" align="center" width="50">
                <template #default="scope"><span>{{scope.$index + 1}}</span></template>
            </el-table-column>
            <el-table-column label="应用名称" prop="name" align="center" header-align="center" min-width="200"></el-table-column>
            <el-table-column label="跳转形式" prop="isSecretName" align="center" header-align="center"></el-table-column>
            <el-table-column label="前台排序" prop="sort" align="center" header-align="center" ></el-table-column>
            <el-table-column label="状态" prop="statusName" align="center" header-align="center"></el-table-column>
            <el-table-column label="最近修改日期" prop="updateDate" align="right" header-align="right"></el-table-column>
            <el-table-column label="" align="center" header-align="center">
                <template #default="scope">
                    <el-button type="text" icon="el-icon-edit" @click="handleOperate(scope.row)">操作</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script lang="ts" setup>
import baseService from "@/service/baseService";
import { getCurrentInstance, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useAddApplyManageStore } from "@/store/modules/addApplyManage";
let proxy = getCurrentInstance() as any;
let loading=ref(false);
let router = useRouter();
let isDel = ref(false);
let searchParam = ref({
    linkType:null
})
let dataLists = ref([]);
let tableHeight = ref(0);
let addApplyManageStore = useAddApplyManageStore();

onMounted(()=>{
    getDataList();
})
/**
 * 获取数据
 */
let getDataList = ()=>{
    let params = {
        isSecret: searchParam.value.linkType
    }  
    loading.value = true;           
    baseService.get(`/work/app/list`,params).then(res=>{
        loading.value = false;
        let datas = res.data || {};
        if(res.code !=0){
            proxy.$message.error(res.msg);
            return false;
        }
        dataLists.value = datas || [];
    }) 
};
/**
 * 新增应用
 */
let addApply = ()=>{
    isDel.value = true;
    let params = {
        pageTitle: '新增应用及授权'
    }
    addApplyManageStore.state.routerParams = params;
    router.push({ name:'addApplyManage' })
}
/**
 * 操作
 */
let handleOperate=(rows)=>{
    isDel.value = true;
    let row = JSON.parse(JSON.stringify(rows));
    let params = row;
    params['pageTitle']=`操作（${row.isSecretName || ''}）`;
    addApplyManageStore.state.routerParams = params;
    router.push({
        name:'addApplyManage',
        state: params
    })
};
</script>
<style lang="scss" scoped>
.bm_title{
    width: 800px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.slicer_line.el-divider{
    width: 800px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 20px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.avatar {
    width: 94px;
    height: 94px;
    display: block;
}
.bm_con{
    width: 700px;
}
</style>
